/* components */
import { 
  BaseSelectUserSelectPanelRight,
  BaseSelectUserNoDataView,
  BaseSelectUserInfiniteScrollUser,
  BaseSelectUserUserItems
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, BaseSelectUserFetchDebounceTime, SelectUserComponentRole } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { 
  useBaseSelectUserStoreCurrentToggleRole,
  useBaseSelectUserStoreLoadingMap, 
  useBaseSelectUserStoreRoleList, 
  useBaseSelectUserStoreUserListMap 
} from '@src/component/common/BaseSelectUser/store'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
import { isFalse } from '@src/util/type'
import { debounce } from 'lodash'
import { useSelectUserRoleUserList, useBaseSelectUserRoleUserListParams, useBaseSelectUserFilter, useFetchRoleList, useFetchRoleUserList } from '../..'

export type RoleProps = {
  isMulti: boolean;
  value: SelectUserComponentRole[];
}

export interface RoleSetupState {
  
}

export enum RoleEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
}

export type RoleInstance = ComponentInstance & RoleSetupState
export type RoleVM = ComponentRenderProxy<RoleProps> & CommonComponentInstance & RoleInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserRoleRight,
  emits: [
    RoleEmitEventNameEnum.Input,
    RoleEmitEventNameEnum.Click
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentRole[]>,
      default: () => []
    }
  },
  setup(props: RoleProps, { emit }) {
    
    const { roleList, isRoleListEmpty } = useBaseSelectUserStoreRoleList()
    const { roleUserList, userListMap, isRoleUserListEmpty, setRoleUserList } = useBaseSelectUserStoreUserListMap()
    
    const { isCurrentToggleRoleEmpty, isCurrentToggleRoleNotEmpty, setCurrentToggleRole, currentToggleRole } = useBaseSelectUserStoreCurrentToggleRole()
    const { isLoadmoreDisabled, isLoadmoreNotDisabled } = useSelectUserRoleUserList()
    
    const { addPageNum } = useBaseSelectUserRoleUserListParams()
    
    const { isFetchRoleList } = useBaseSelectUserFilter()
    
    const { roleLoading, roleUserLoading, tabLoading, setRoleUserLoading, clearRoleUserLoading } = useBaseSelectUserStoreLoadingMap()
    
    /** 
     * @description 是否显示角色人员列表无数据页面
     * 1. 角色列表为空
     * 2. 且 不在加载状态
    */
    const isShowRoleUserListNotDataView = computed(() => {
      
      if (roleLoading.value) {
        return false
      }
      
      return isRoleUserListEmpty.value && isFalse(roleUserLoading.value) && isFalse(roleLoading.value)
    })
    
    /** 
     * @description 是否不显示角色人员列表无数据页面
    */
    const isNotShowRoleUserListNotDataView = computed(() => {
      return isFalse(isShowRoleUserListNotDataView.value)
    })
    
    // 获取角色人员列表
    const fetchRoleUserList = useFetchRoleUserList()
    
    const onRoleItemClickHandler = (value: SelectUserComponentRole) => {
      setCurrentToggleRole(value)
      setRoleUserList()
      fetchRoleUserList()
    }
    
    const loadmoreHandler = () => {
      addPageNum()
      fetchRoleUserList().finally(clearRoleUserLoading)
    }
    
    const loadmoreDebounceHandler = debounce(loadmoreHandler, BaseSelectUserFetchDebounceTime)
    
    const loadmoreDebounceImplHandler = () => {
      
      if (isLoadmoreNotDisabled.value) {
        setRoleUserLoading()
      }
      
      loadmoreDebounceHandler()
    }
    
    return {
      currentToggleRole,
      roleList,
      roleUserList,
      userListMap,
      
      isCurrentToggleRoleEmpty,
      isCurrentToggleRoleNotEmpty,
      isLoadmoreDisabled,
      isShowRoleUserListNotDataView,
      isNotShowRoleUserListNotDataView,
      isFetchRoleList,
      
      roleUserLoading,
      roleLoading,
      tabLoading,
      
      setCurrentToggleRole,
      onRoleItemClickHandler,
      
      loadmoreHandler,
      loadmoreDebounceImplHandler
    }
    
  },
  methods: {
    /** 
    * @description 获取属性列表
    */
    getAttributes() {
      return {
        directives: [
          {
            name: 'loading',
            value: (this.roleLoading || this.roleUserLoading) && isFalse(this.tabLoading)
          }
        ]
      }
    }
  },
  render(h: CreateElement) {
    
    const attrs = this.getAttributes()
    
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserRoleRight} {...attrs}>
        <div 
          class="base-select-user-height-100-percent" 
          v-show={this.isNotShowRoleUserListNotDataView}
        >
          
          {/* start 无限滚动人员 */}
          <BaseSelectUserInfiniteScrollUser
            disabled={this.isLoadmoreDisabled}
            loadmore={this.loadmoreDebounceImplHandler}
          >
            
            {/* start 人员列表 */}
            <BaseSelectUserUserItems 
              value={this.roleUserList} 
              is-multi={this.isMulti} 
            />
            {/* end 人员列表 */}
            
          </BaseSelectUserInfiniteScrollUser>
          {/* end 无限滚动人员 */}
          
        </div>
        
        {/* start 无数据显示 */}
        <BaseSelectUserNoDataView v-show={this.isShowRoleUserListNotDataView} />
        {/* end 无数据显示 */}
        
      </div>
    )
  }
})
